<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片视频字符画 v3</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.min.css">
    <link rel="stylesheet" href="css/style.css">
    <!-- CDN http://www.jsdelivr.com/ -->
    <script src="//cdn.jsdelivr.net/npm/vue@3.0.7/dist/vue.global.prod.js"></script>
    <script src="//cdn.jsdelivr.net/npm/lodash@4.17.15/lodash.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/hls.js@0.13.0/dist/hls.light.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/flv.js@1.5.0/dist/flv.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/libgif@0.0.3/libgif.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/dot@1.1.3/doT.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/stats-js@1.0.0/build/stats.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/js-url@2.3.0/url.min.js"></script>
    <!-- inferno -->
    <!-- <script src="//cdn.jsdelivr.net/npm/inferno@7.4.2/dist/inferno.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/inferno-create-element@7.4.2/dist/inferno-create-element.min.js"></script> -->
    <!-- anujs -->
    <!-- <script src="//cdn.jsdelivr.net/npm/anujs@1.6.0/dist/React.min.js"></script> -->
</head>
<body>
    <div id="app" ref="app">
        <div class="box">
            <!-- @canplay="loadedmetadata($event)" -->
            <!-- preload autoplay controls  -->
            <!-- playsinline webkit-playsinline x5-playsinline  -->
            <!-- x5-video-player-type="h5" x5-video-player-fullscreen="ture" -->
            <video ref="video" class="video" @loadedmetadata="loadedmetadata($event)" @play="play($event)" @pause="pause($event)" @ended="pause($event)" autoplay></video>
            <img ref="image" class="image" @load="imgLoaded($event)" />
            <canvas ref="canvas" class="canvas"></canvas>
        </div>
        <div ref="view" class="view">
            <div v-html="content" :class="viewClass" :style="viewStyle"></div>
        </div>
        <div ref="tool" class="tool" >
            <input ref="file" type="file" @change="fileChange($event)" hidden>
            <button type="button" @click="$refs.file.click()">图片/视频</button>
            <button type="button" @click="videoPlay($event)">播放/暂停</button>
        </div>
    </div>
    <script src="js/script.js"></script>
</body>
</html>